.map,
#container{
  height: 100%;
}

.map {
  padding-top: 45px;
  .am-navbar.am-navbar-light{
    margin-top: -45px;
    position: relative;
  }

  .area-box{
    border: 1px solid #fff;
    background-color: green;
    color: #fff;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    text-align: center;
    div{
      margin: 15px 0;
    }
  }

  .rect-box{
    background-color: green;
    border: 1px solid #fff;
    color:#fff;
    padding: 5px 8px;
    border-radius: 3px;
  }

  .houselist-box{
    width: 100%;
    height: 320px;
    position: fixed;
    background-color: #fff;
    bottom: 0;
    left: 0;
    z-index: 99;
    right: 0;
    transform: translateY(320px);
    transition: all .4s;
    
    .houselist-title{
      background-color: #ddd;
      line-height: 45px;
      height: 45px;
      padding-left: 10px;
    }
    .houselist-list{
      height: calc(320px - 45px);
      overflow-y: auto;

      .houselist-item{
        display: flex;
        justify-content: space-between;
      }
      .houselist-item-left{
        width: 120px;
        padding: 10px;
        img{
          width: 100px;
          height: 80px;
        }
      }
      .houselist-item-right{
        flex: 1;
      }
    }
  }

  .houselist-box-show {
    transform: translateY(0px);
  }
}